import { defineStore } from 'pinia'
import themeConfig from '@/assets/theme.ts'

export const themeStore = defineStore('themeStore', () => {

  const setTheme = (elementName: string, themeName: string) => {
    if (!themeConfig[elementName]) return

    const element = themeConfig[elementName]
    let el: any = null;
    if (element.scope !== 'all') {
      el = document.getElementById(element.scope);
    } else {
      el = document.documentElement
    }

    if (!el) return

    const theme = element[themeName]
    if (!theme) return

    Object.keys(theme).forEach((key) => {
      el.style.setProperty(key, theme[key])
    })
  }

  return { setTheme }
})